<!DOCTYPE html>
<html>
<head>
    <title>Production WebSocket Debug</title>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <h1>Production WebSocket Debug</h1>
    <div id="logs"></div>
    <input type="text" id="username" placeholder="Username" value="TestUser123">
    <button onclick="joinChat()">Join Chat</button>
    <button onclick="testConnection()">Test Connection</button>

    <script>
        const logs = document.getElementById('logs');
        let socket = null;
        
        function log(message) {
            console.log(message);
            logs.innerHTML += '<div>' + new Date().toISOString() + ': ' + JSON.stringify(message) + '</div>';
        }

        function testConnection() {
            log('Testing connection to production...');
            
            // 测试两种连接方式
            
            // 1. 连接到 /realtime 命名空间
            const realtimeSocket = io('wss://c4pad.fun/realtime', {
                path: '/socket.io',
                transports: ['websocket'],
                forceNew: true,
            });

            realtimeSocket.on('connect', () => {
                log('Connected to /realtime namespace');
                log('Socket ID: ' + realtimeSocket.id);
                
                // 发送服务器确认事件
                realtimeSocket.emit('test', { message: 'Hello from /realtime' });
            });

            realtimeSocket.on('connected', (data) => {
                log('Server connected event from /realtime: ' + JSON.stringify(data));
            });

            realtimeSocket.on('connect_error', (error) => {
                log('Error connecting to /realtime: ' + error.message);
            });

            // 2. 连接到默认命名空间
            const defaultSocket = io('wss://c4pad.fun', {
                path: '/socket.io',
                transports: ['websocket'],
                forceNew: true,
            });

            defaultSocket.on('connect', () => {
                log('Connected to default namespace');
                log('Socket ID: ' + defaultSocket.id);
            });

            defaultSocket.on('connected', (data) => {
                log('Server connected event from default: ' + JSON.stringify(data));
            });

            defaultSocket.on('connect_error', (error) => {
                log('Error connecting to default: ' + error.message);
            });

            socket = realtimeSocket;
        }

        function joinChat() {
            if (!socket) {
                log('No socket connection');
                return;
            }
            
            const username = document.getElementById('username').value;
            log('Joining chat with username: ' + username);
            
            socket.emit('join_chat', { username: username });
            
            // 监听响应
            socket.on('user_joined', (data) => {
                log('User joined event: ' + JSON.stringify(data));
            });
            
            socket.on('online_users', (data) => {
                log('Online users event: ' + JSON.stringify(data));
            });
            
            socket.on('username_taken', (data) => {
                log('Username taken event: ' + JSON.stringify(data));
            });
        }

        // 自动测试
        testConnection();
    </script>
</body>
</html>
